<template>
  <view class="betting" :class="'theme-' + state.THEME">
    <loading v-if="!STATE.guessHero.games"></loading>
    <view class="betting-panel" v-else v-for="(item, index) in betting" :key="index">
      <view class="betting-panel-header" v-text="item.title"></view>
      <view class="betting-panel-body">
        <view class="betting-type-options">
          <view class="btn" :class="{ active: item.value === index2 + 1 }" v-for="(item2, index2) in item.options" :key="index2" @click="onClickItem(index, index2)">
            <view v-text="item2"></view>
            <view>{{ calc(index, index2) | float2int }}积分</view>
          </view>
        </view>
        <view class="betting-sunshine">
          <view class="betting-double-number">x {{ betting[index].double }}</view>
          <view class="betting-sunshine-img"><image src="/static/images/game/sun.png" mode="widthFix"></image></view>
        </view>
        <view class="betting-double-text text-blue" @click="onClickDouble(index)">翻倍</view>
      </view>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import { float2int } from "@/utils";
//组件
import loading from "@/components/loading";
export default {
  components: {
    loading
  },
  data() {
    return {
      // 当前投注选项
      betting: {
        num: {
          title: "猜编号",
          options: ["单", "双"],
          value: 0,
          double: 1
        },
        sex: {
          title: "猜性别",
          options: ["男", "女"],
          value: 0,
          double: 1
        },
        remote: {
          title: "猜攻击方式",
          options: ["远程", "近战"],
          value: 0,
          double: 1
        },
        magic: {
          title: "猜英雄是否有魔法",
          options: ["有", "无"],
          value: 0,
          double: 1
        }
      },
      scoreTotal: 0,
      sunTotal: 0
    };
  },
  props: {
    // 最大翻倍倍率
    maxDouble: {
      type: Number,
      default: 16
    }
  },
  computed: {
    state() {
      return this.$store.state;
    },
    //当前游戏信息，必须含倍率信息
    gameInfo() {
      return this.$store.state.guessHero.games[this.$store.state.guessHero.currentGame] || null;
    }
  },
  mounted() {
    // 初始化
    uni.$on("betting_init", () => {
      for (let i in this.betting) {
        this.betting[i].value = 0;
        this.betting[i].double = 1;
      }
    });
    // 计算阳光值和积分
    uni.$on("betting_calc_start", () => {
      uni.$emit("betting_calc_end", this.calcCurrentScoreAndSun());
    });
  },
  watch: {
    betting: {
      immediate: true,
      deep: true,
      handler(n) {
        let c = this.calcCurrentScoreAndSun();
        // 监听改变
        this.$emit("event-change", {
          betting: n,
          spendScore: c.score,
          spendSun: c.sun
        });
      }
    }
  },
  methods: {
    onClickItem(i, j) {
      if (this.betting[i].value === j + 1) {
        this.betting[i].value = null;
        this.betting[i].double = 1;
      } else {
        this.betting[i].value = j + 1;
      }
    },
    // 计算当前选择的积分和阳光值
    calcCurrentScoreAndSun() {
      let score = 0;
      let sun = 0;
      for (let i in this.betting) {
        let f = i + this.betting[i].value + "_rate";
        if (this.betting[i].value) {
          score = score + this.gameInfo[f] * this.betting[i].double;
          sun = sun + this.betting[i].double;
        }
      }
      return {
        score: score ? float2int(score) : 0,
        sun
      };
    },

    // 翻倍
    onClickDouble(type) {
      if (this.betting[type].double >= this.maxDouble) {
        uniApp.toast(`最高翻${this.maxDouble}倍哦!`);
        return false;
      }
      this.betting[type].double = this.betting[type].double * 2;
    },
    calc(i, j) {
      if (this.gameInfo) {
        return this.gameInfo[`${i}${j + 1}_rate`];
      }
      return 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.betting {
  .betting-panel {
    width: 95%;
    margin: 20upx auto;
    .betting-panel-header {
      margin: 10upx 0;
      padding-left: 20upx;
      font-size: 24upx;
      height: 24upx;
      line-height: 24upx;
      color: #9aa2af;
    }
    .betting-panel-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .betting-type-options {
        width: 500upx;
        display: flex;
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;
          padding: 15upx 20upx;
          border-radius: 5upx;
          font-size: 24upx;
          width: 220upx;
          margin: 0 10upx;
          &.win {
            color: #ffffff;
            position: relative;
            z-index: 0;
            border-radius: 6upx;
            overflow: hidden;
            &::before {
              content: "";
              position: absolute;
              z-index: -2;
              left: -50%;
              top: -50%;
              width: 200%;
              height: 200%;
              background-repeat: no-repeat;
              background-size: 50% 50%, 50% 50%;
              background-position: 0 0, 100% 0, 100% 100%, 0 100%;
              background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
              -webkit-animation: rotate 4s linear infinite;
              animation: rotate 4s linear infinite;
            }
            &::after {
              content: "";
              position: absolute;
              z-index: -1;
              left: 0;
              right: 0;
              top: 5%;
              bottom: 0;
              margin: 0 auto;
              width: 96%;
              height: 90%;

              border-radius: 5upx;
            }
          }
        }
      }
      .betting-sunshine {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .betting-double-number {
        }
        .betting-sunshine-img {
          height: 50upx;
          width: 50upx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .betting-double-text {
      }
    }
  }
  &.theme-poster {
    .betting-panel-header {
      border-left: 8upx solid #9aa2af;
    }
    .betting-panel-body {
      .betting-type-options {
        .btn {
          background-color: #0f86c3;
          color: #ffffff;
          box-shadow: 10upx 10upx 10upx 0 #bbbbbb;
          &.win {
            &::before {
              background-color: #399953;
            }
            &::after {
              background-color: #fbbd08;
            }
          }
          &.active {
            background-color: #f37b1d;
            border: none;
          }
        }
      }
    }
  }
  &.theme-2d {
    .betting-panel-body {
      .betting-type-options {
        .btn {
          border-radius: 10upx;
          border: 1upx solid #dfdfdf;
          background-color: #ffffff;
          color: #7b7b7b;
          &.win {
            &::before {
              background-color: #fbbd08;
            }
            &::after {
              background-color: #fbbd08;
            }
          }
          &.active {
            background-color: #fa8fc6;
            border: none;
            color: #ffffff;
          }
        }
      }
    }
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
</style>
